<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>压缩音频信号</title>

    <link rel="stylesheet" href="">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <h1>Compressor example</h1>
    <audio controls>
      <source src="../../AudioContext+canvas/mp3/杨子姗 - 微甜的回忆.mp3" type="audio/mp3">
    </audio>
      <p>压缩可降低信号最响亮部分的音量，并提高最柔和部分的音量。总体而言，可以获得更大，更丰富，更饱满的声音。在同时播放大量单独声音的游戏和音乐应用程序中，这尤其重要，您需要控制整体信号电平并帮助避免音频输出的削波（失真）。</p>
    <button data-active="false">Add compression</button>
    <pre></pre>
  </body>
<script>
var myAudio = document.querySelector('audio');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');
var button = document.querySelector('button');
var audioCtx;
pre.innerHTML = myScript.innerHTML;
myAudio.addEventListener('play', () => {
  if(!audioCtx) {
    // Set up AudioContext
    var AudioContext = window.AudioContext || window.webkitAudioContext;
    audioCtx = new AudioContext();
    // Create a MediaElementAudioSourceNode
    // Feed the HTMLMediaElement into it
    var source = audioCtx.createMediaElementSource(myAudio);
    // Create a compressor node
    var compressor = audioCtx.createDynamicsCompressor();
    compressor.threshold.value = -50;
    compressor.knee.value = 40;
    compressor.ratio.value = 12;
    compressor.attack.value = 0;
    compressor.release.value = 0.25;
    // connect the AudioBufferSourceNode to the destination
    source.connect(audioCtx.destination);
    button.onclick = function() {
      var active = button.getAttribute('data-active');
      if(active == 'false') {
        button.setAttribute('data-active', 'true');
        button.innerHTML = 'Remove compression';
        source.disconnect(audioCtx.destination);
        source.connect(compressor);
        compressor.connect(audioCtx.destination);
      } else if(active == 'true') {
        button.setAttribute('data-active', 'false');
        button.innerHTML = 'Add compression';
        source.disconnect(compressor);
        compressor.disconnect(audioCtx.destination);
        source.connect(audioCtx.destination);
      }
    }
  }
})

/*

DynamicsCompressorNode.threshold 
比例系数 AudioParam 型。分贝高于此值时，将会进行压缩。

DynamicsCompressorNode.knee 
比例系数 AudioParam 型。当超出 threshold 设置的值之后，曲线在哪个点开始朝着 ratio 设置的部分平滑变换。

DynamicsCompressorNode.ratio 
比例系数 AudioParam 型。输入增益变化多少来产生 1 dB 的输出。

DynamicsCompressorNode.reduction 
float 型。表示当前压缩器使用的增益压缩值。

DynamicsCompressorNode.attack 
比例系数 AudioParam 型。降低增益 10 dB 的时间（单位为秒）。

DynamicsCompressorNode.release 
比例系数 AudioParam 型。提升增益 10 dB 的时间（单位为秒）。
*/
  </script>

</html>